<template>
    <div>
        <div>
            <div class="zg_jpkc">
                <div class="zg_jpkbt">
                    <a href="/list/?price=1" target="_blank" class="zg_jpbta">更多</a>
                    <ul class="zg_jpnav">
                        <li class="zg_jpn11">{{subjctTypes.category_id}}</li>
                        <li v-for="ite in subjctTypes.subject_id">

                            <a href="/list-199/?price=1" target="_blank" @mouseover="on(ite)">{{ite}}</a>
                        </li>
                    </ul>
                </div>

                <div class="zg_jpbox">
                    <ul class="zg_jpkcu" style="display: block;">
                        <div v-for="subCate in Category">
                            <li :style=subCate.style>
                                <div class="zg_jpkclt">
                                    <a href="/class-165633/">
                                        <img v-bind:src="subCate.image"
                                             title="IT培训课程-IT培训在线课程-培训-视频-教程-优就业" alt="IT培训课程-IT培训在线课程-培训-视频-教程-优就业">
                                    </a>
                                </div>
                                <h6>
                                    <a href="/class-165633/">
                                        {{subCate.title}} </a>
                                </h6>
                                <p>
                                    <span>{{subCate.countHour}}课时</span>
                                    <font><i>￥</i>{{subCate.price}}</font>
                                </p>
                            </li>
                        </div>
                    </ul>
{{subjctTypes.category_id}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from "axios"

    export default {
        name: "ClassCategories",
        props:{
            Category: '', subjctTypes:''
        },
        methods: {
            on(event) {
                console.log(event)
                for (var i in this.Category) {
                    this.Category[i].style = "display: none;"
                    if (event == "1互联网营销" && this.Category[i].categoryId == 1) {
                        this.Category[i].style = "display: block;"
                    }
                    if (event == "2设计" && this.Category[i].categoryId == 2) {
                        this.Category[i].style = "display: block;"
                    }
                    if (event == "3Web前端" && this.Category[i].categoryId == 3) {
                        this.Category[i].style = "display: block;"
                    }
                    if (event == "4程序开发" && this.Category[i].categoryId == 4) {
                        this.Category[i].style = "display: block;"
                    }
                    if (event == "6Office" && this.Category[i].categoryId == 6) {
                        this.Category[i].style = "display: block;"
                    }


                    for (var i in this.Category) {
                        this.costCategory[i].style = "display: none;"
                        if (event == "1互联网营销" && this.costCategory[i].categoryId == 1) {
                            this.costCategory[i].style = "display: block;"
                        }
                        if (event == "1019Java" && this.costCategory[i].subjectId == 1019) {
                            this.costCategory[i].style = "display: block;"
                        }
                        if (event == "1023大数据开发" && this.costCategory[i].subjectId == 1023) {
                            this.costCategory[i].style = "display: block;"
                        }
                        if (event == "1020软件测试" && this.costCategory[i].subjectId == 1020) {
                            this.costCategory[i].style = "display: block;"
                        }


                    }
                }
            }
        },
        data() {
           return {
              /*   subjctTypes: [{
                    category_id: "精品网课",
                    subject_id: ["1互联网营销", "2设计", "3Web前端", "4程序开发", "6Office"]
                }, {
                    category_id: '免费课程',
                    subject_id: ["1互联网营销", "2设计", "3Web前端", "4程序开发"]
                },
                    {
                        category_id: '就业面授班',
                        subject_id: ["1互联网营销", "1019Java", "1023大数据开发 ", "1020软件测试"]
                    }],
                freeCategory: '', costCategory: '',*/
                freeReqbody: {
                    "pageSize": 10,
                    "priceType": 2,
                },
                costReqbody: {
                    "pageSize": 10,
                    "priceType": 1,
                }
            }
        },
        created() {
            const _this = this
            axios.post("http://localhost:8761/api/course/getCourseList", this.freeReqbody).then(function (resp) {
                _this.freeCategory = resp.data.records
                for (var i in _this.freeCategory) {
                    _this.$set(_this.freeCategory[i], 'style', "display: block;")
                }
                console.log(_this.freeCategory)

            })
            axios.post("http://localhost:8761/api/course/getCourseList", this.costReqbody).then(function (resp) {
                _this.costCategory = resp.data.records
                _this.$set(_this.costCategory[i], 'style', "display: block;")
            })
        }
    }
</script>

<style scoped>

</style>
